<template>
  <ry-modal
    title="细胞信息"
    v-model="visible"
    destroyOnClose
    :confirmLoading="confirmLoading"
    :ryfooter="null"
    width="1000px"
  >
    <div class="table-container">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model
          layout="inline"
          v-bind="searchModelConfig"
          @keyup.enter.native="searchQuery"
        >
          <a-row v-bind="searchRowConfig">
            <a-col :span="6">
              <a-form-model-item>
                <a-input
                  v-model="queryParam.searchValue"
                  placeholder="请输入细胞编号/客户名称/手机号"
                >
                  <a-icon slot="prefix" class="font-placeholder" type="search"/>
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col class="table-page-search-submitButtons" v-bind="searchColConfig">
              <a-button @click="searchQuery" type="primary">查询</a-button>
              <a-button @click="searchReset" type="danger">重置</a-button>
            </a-col>
          </a-row>
        </a-form-model>
      </div>

      <!-- 表格 -->
      <a-row>
        <a-col :span="24">
          <ry-table
            :columns="columns"
            :loading="loading"
            :data-source="dataSource"
            :rowKey="record => record.id"
            :pagination="ipagination"
            bordered
            :scroll="{ x: 'max-content'}"
          >
            <!-- 客户名称 -->
            <template slot="nickname" slot-scope="{ record }">
              <span>
                {{
                  (record.businessAccount && record.businessAccount.nickname) ||
                  record.nickname ||
                  '--'
                }}
              </span>
            </template>

            <!-- 联系方式 -->
            <template slot="serialNumber" slot-scope="{ record }">
              <span>
                {{record.serialNumber}}
              </span>
            </template>

            <!-- 项目名称（字典回显，多值 Tag，仿采样） -->
            <template slot="applyProject" slot-scope="{ text }">
              <span v-if="text">
                <a-tag
                  v-for="tag in splitCodes(text)"
                  :key="tag"
                  color="blue"
                >
                  {{ $getDictName('APPLY_PROJECT', tag) }}
                </a-tag>
              </span>
              <span v-else>--</span>
            </template>

            <!-- 细胞类型来源（record_source 字典） -->
            <template slot="sourceType" slot-scope="{ text }">
              <span>{{ $getDictName('record_source', text)}}</span>
            </template>
            <template slot="status" slot-scope="{ text }">
              <span>{{ $getDictName('cell_status', text)}}</span>
            </template>

            <!-- 操作 -->
            <template slot="action" slot-scope="{ record }">
              <a-tooltip>
                <span slot="title" v-if="record.cellNum === 0">细胞管数为0时，不可选择</span>
                <a-button type="primary" size="small" @click="selectCell(record)" :disabled="record.cellNum === 0">选择</a-button>
              </a-tooltip>
            </template>
          </ry-table>
        </a-col>
      </a-row>
    </div>
  </ry-modal>
</template>

<script>
import {RyListMixin} from '@/ryweb'

export default {
  name: 'CellSelectModal',
  mixins: [RyListMixin],

  props: {
  },

  data() {
    return {
      confirmLoading: false,
      visible: false,
      // UI 搜索表单字段；固定参数单独放
      queryParam: {
        searchValue: ''
      },
      url: {
        list: this.$api.permission.cellList.cell
      },

      columns: [
        {title: '细胞编号', align: 'center', dataIndex: 'cellCode'},
        {title: '客户名称', align: 'center', dataIndex: 'nickname', scopedSlots: {customRender: 'nickname'}},
        {title: '客户编号', align: 'center', dataIndex: 'serialNumber'},
        {title: '项目名称', align: 'center', dataIndex: 'applyProject', scopedSlots: {customRender: 'applyProject'}},
        {title: '细胞类型来源', align: 'center', dataIndex: 'sourceType', scopedSlots: {customRender: 'sourceType'}},
        {title: '细胞管数(管)', align: 'center', dataIndex: 'cellNum'},
        {title: '细胞数量', align: 'center', dataIndex: 'quantity'},
        {title: '细胞状态', align: 'center', dataIndex: 'status', scopedSlots: {customRender: 'status'}},
        {title: '操作', align: 'center',fixed: 'right', dataIndex: 'action', scopedSlots: {customRender: 'action'}}
      ],
    }
  },

  created() {
  },

  methods: {
    open(value) {
      if (value === 'notZbfs') {
        this.queryParam = {
          notZbfs: value
        }
      } else {
        this.queryParam = {
          status: value
        }
      }
      this.visible = true
      this.loadData()
    },

    /** 重置搜索输入，但不清业务固定参数 */
    searchReset() {
      this.queryParam.searchValue = ''
      this.loadData()
    },

    /** 拆分逗号列表（项目、多来源等） */
    splitCodes(val) {
      if (!val) return []
      return String(val).split(',').map(function (s) {
        return s.trim()
      }).filter(Boolean)
    },

    /** 选中某行细胞，将必要字段传回父组件 */
    selectCell(record) {
      console.log('selectCell', record)
      this.$emit('cell', record)
      this.visible = false
    }
  }
}
</script>

<style scoped>
.ry-modal .body-container .ant-form-item {
  margin-bottom: 0.15rem;
}

.table-container {
  padding: 0;
}

</style>
